<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>商铺详情</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resource/detail/css/aui.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/detail/css/idangerous.swiper.css">
</head>
<style>
.aui-iconfont {
    font-size: 22px !important;
}
    *{
        font-family:Microsoft YaHei ;
    }


.swiper-container {
    width:90%;
    height:150px;
    color: #fff;
    background: #deebe0;
    text-align: center;
}
.swiper-slide {
    height: 100%;
    opacity: 0.4;
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -ms-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}
.swiper-slide-visible {
    opacity: 0.5;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
}
.swiper-slide-active {
    top: 0;
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.red-slide {
    background: url("image/2.jpg");
    background-size: 100% 100%;
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
}
.blue-slide {
    background: url("image/3.jpg");
    background-size: 100% 100%;
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
}
.orange-slide {
    background: url("image/4.jpg");
    background-size: 100% 100%;
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
}
.green-slide {
    background: url("image/5.jpg");
    background-size: 100% 100%;
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
}
.pink-slide {
    background: url("image/6.jpg");
    background-size: 100% 100%;
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
}
.swiper-slide .title {
    font-style: italic;
    font-size: 20px;
    margin-top: 100px;
    margin-bottom: 0;
    line-height: 45px;
    color: #222222;
}
.pagination {
    position: absolute;
    z-index: 20;
    left: 0px;
    width: 100%;
    text-align: center;
    bottom: 5px;
}
.swiper-pagination-switch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 8px;
    background: #aaa;
    margin-right: 8px;
    cursor: pointer;
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -ms-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
    opacity: 0;
    position: relative;
    top: -50px;
}
.swiper-visible-switch {
    opacity: 1;
    top: 0;
    background: #aaa;
}
.swiper-active-switch {
    background: #fff;
}
</style>
<body>
<div class="aui-user-view">
    <li class="aui-user-view-cell aui-img">
        <img class="aui-img-object aui-pull-left" src="${shop.imageUrl }">
        <div class="aui-img-body">
            <span style="font-weight: bold">${shop.subject }</span>
            <p class='aui-ellipsis-1'>${shop.address }   <span style="font-size: 12px;font-weight: bold">  </span>  </p>
        </div>
    </li>

    <div class="aui-content">
        <ul class="aui-list-view">
            <!--<li class="aui-list-view-cell" style="color: #ffbc0c" >-->
                <!--<span class="aui-pull-left ">口味：9.0</span>-->
                <!--<span class="aui-pull-left ">环境：9.0</span>-->
                <!--<span class="aui-pull-left ">服务：9.0</span>-->

            <!--</li>-->

            <li class="aui-list-view-cell" style="color: #0062cc" >
               <span class="aui-pull-left aui-iconfont aui-icon-location"></span>
                <p style="padding-top: 5px;text-align: center">  ${shop.address }    </p>
           </li>
            <li class="aui-list-view-cell" style="color: #0062cc" >
                <span class="aui-pull-left aui-iconfont aui-icon-phone"></span>
                <p style="padding-top: 5px;text-align: center"> ${shop.phoneNumber }    </p>
            </li>
            <li class="aui-list-view-cell" style="color: #999999" >
                <div style="margin-top: 20px">
                   ${shop.summary }
                </div>
            </li>
        </ul>

    </div>

</div>
</body>
<script src="${pageContext.request.contextPath}/resource/detail/js/jquery-1.10.1.min.js"></script>
                <script src="${pageContext.request.contextPath}/resource/detail/js/idangerous.swiper.min.js"></script>
                <script type="text/javascript" src="${pageContext.request.contextPath}/resource/detail/script/api.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resource/detail/script/aui-alert.js" ></script>
                <script>
                    var mySwiper = new Swiper('.swiper-container',{
                        pagination: '.pagination',
                        paginationClickable: true,
                        centeredSlides: true,
                        slidesPerView: 3,
                        watchActiveIndex: true
                    })
                </script>

</html>